<template>
	<view class="weight-check">
		<view class="my-weight card">
			<view class="card-title">我的体重</view>
			<view class="card-sub-title">{{'最近更新时间'+weightInfo.lastUpdateTime+'天前'}}</view>
			<view class="progress">
				<view class="arcbar-charts-wrap">
					<qiun-data-charts canvas2d="true" canvasId="weight-arcbar-canvas" :chartData="gaugeChartData"
						:opts="gaugeOpts" type="arcbar"></qiun-data-charts>
					<view class="progress-content">
						<view class="progress-title">体重(公斤)</view>
						<view class="progress-value">{{weightInfo.weight||0}}</view>
						<view class="target-rate">{{'目标达成率 '+(weightInfo.weightComplianceRate||0)+'%'}}</view>
						<view class="target-value">目标值<text class="value">{{weightInfo.targetWeight||0}}</text>公斤</view>
					</view>
				</view>
			</view>
			<view class="rate-and-bmi">
				<view class="card rate">
					<view class="top">
						<text class="label">体脂率</text>
						<text class="sub-label">目标达成率<text
								class="value">{{(weightInfo.bodyfatComplianceRate||0)+'%'}}</text>
						</text>
					</view>
					<view class="bottom">
						<view class="left">
							<text class="value">{{''+(weightInfo.bodyfat||0)+''}}<text class="unit">%</text>
							</text>
							<text class="label">当前值</text>
						</view>
						<view class="arrow"></view>
						<view class="right">
							<text class="value">{{''+(weightInfo.targetBodyfat||0)+''}}<text class="unit">%</text>
							</text>
							<text class="label">目标值</text>
						</view>
					</view>
				</view>
				<view class="card bmi">
					<view class="top">
						<text class="label">BMI</text>
						<text class="sub-label">{{'目标达成率'+(weightInfo.bmiComplianceRate||0)+'%'}}</text>
					</view>
					<view class="bottom">
						<view class="left">
							<text class="value">{{''+(weightInfo.bmi||0)+''}}</text>
							<text class="label">当前值</text>
						</view>
						<view class="arrow"></view>
						<view class="right">
							<text class="value">{{''+(weightInfo.targetBmi||0)+''}}</text>
							<text class="label">目标值</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weight-trend card">
			<view class="card-title">体重趋势</view>
			<view class="date-range">
			</view>
		</view>
		<view class="leaderboard card" v-if="false">
			<view class="card-title">本周排行榜</view>
			<view class="card-sub-title">排名参考体脂率目标达成率和打卡次数</view>
			<view class="my-ranking-info" v-if="currentWeekExsitData">
				<view class="col1">我</view>
				<view class="col2">{{weightInfo.currentUid}}</view>
				<view class="col3">{{'第'+weightInfo.ranking+'名'}}</view>
				<view class="col4">{{weightInfo.currentRate+'%'}}</view>
			</view>
			<view class="my-ranking-info" style="justify-content:center;" v-else>本周暂无个人排行数据</view>
			<view class="rank-head">
				<view class="col1">排名</view>
				<view class="col2">UID</view>
				<view class="col3"></view>
				<view class="col4">目标达成率</view>
			</view>
			<template v-if="showRankList.length>0">
				<view class="rank-body" v-for="(item,index) in showRankList" :key="index">
					<view class="col1">
						<image mode class="img" src="" v-if="index<=2"></image>
						<view wx:else>{{index+1}}</view>
					</view>
					<view class="col2">{{'12011'}}</view>
					<view class="col3"></view>
					<view class="col4">{{96}}</view>
				</view>
			</template>
			<template v-else>
				<view class="no-rank-data">暂无排名</view>
			</template>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				gaugeOpts: {
					color: ["#26ccba"],
					padding: 0,
					title: {
						name: "",
						fontSize: 35,
						color: "#2fc25b"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "default",
							width: 12,
							backgroundColor: "#f8f8f9",
							startAngle: 0.75,
							endAngle: 0.25,
							gap: 2,
						},
					},
				},
				gaugeChartData: {
					series: [{
						name: "正确率",
						color: "#26ccba",
						data: 96 / 100
					}, ],
				},
				weightInfo: {
					lastUpdateTime: 10,
					percent: 0,
					targetBmi: 25,
					targetBodyfat: 20,
					targetWeight: 75.0,
					bmi: 25.76,
					bmiComplianceRate: 96,
					bodyfat: 27.6,
					bodyfatComplianceRate: 80,
					weight: 76.2,
					weightComplianceRate: 96,
					ranking: 0,
					currentUid: "",
					currentRate: 0,
				},
				showRankList: [],
				currentWeekExsitData: false,
				chartData: {},
				opts: {
					color: ["#0cc2ae"],
					xAxis: {
						labelCount: 3,
						itemCount: 3,
						disableGrid: false,
						gridType: "dash",
						gridColor: "#ccc",
						axisLineColor: "#ccc",
					},
					yAxis: {
						data: [{
							min: 0,
							axisLineColor: "#ccc"
						}]
					},
					legend: {
						show: false
					},
					extra: {
						tooltip: {
							showArrow: false,
							bgColor: "#0cc2ae",
							borderRadius: 6,
							legendShape: "circle",
							myWeightTooltip: true,
						},
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow",
						},
					},
				},
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
		min-height: 100%;
		min-width: 100%;
	}

	.weight-check {
		margin: 0 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 24rpx 0;
	}

	.card .card-title {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 8rpx;
		padding-left: 24rpx;
	}

	.card .card-sub-title {
		font-size: 24rpx;
		margin-bottom: 28rpx;
		padding-left: 24rpx;
	}

	.my-weight {
		margin-bottom: 20rpx;
	}

	.my-weight .progress {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.my-weight .progress .arcbar-charts-wrap {
		height: 370rpx;
		position: relative;
		width: 380rpx;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content {
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 0 0.25em rgba(67, 71, 85, 0.27),
			0 0.25em 1em rgba(90, 125, 188, 0.05);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 280rpx;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 280rpx;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content .progress-title {
		color: #7c7c7c;
		font-size: 24rpx;
		margin-bottom: 4rpx;
		margin-top: 40rpx;
		text-align: center;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content .progress-value {
		font-size: 42rpx;
		font-weight: 700;
		margin-bottom: 4rpx;
		text-align: center;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content .target-rate {
		color: #26ccba;
		font-size: 24rpx;
		margin-bottom: 12rpx;
		text-align: center;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content .target-value {
		background-color: #f5f6f8;
		border-radius: 32rpx;
		font-size: 24rpx;
		padding: 12rpx;
		text-align: center;
	}

	.my-weight .progress .arcbar-charts-wrap .progress-content .target-value .value {
		font-weight: 700;
		margin: 0 3rpx;
	}

	.my-weight .progress .u-circle-progress {
		transform: rotateZ(-180deg);
	}

	.my-weight .rate-and-bmi {
		display: flex;
		margin: 0 20rpx;
	}

	.my-weight .rate-and-bmi .rate {
		margin-right: 20rpx;
	}

	.my-weight .rate-and-bmi .card {
		background-color: #f5f6f8;
		border-radius: 28rpx;
		flex: 1;
		padding: 20rpx;
	}

	.my-weight .rate-and-bmi .card .top {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.my-weight .rate-and-bmi .card .top .label {
		font-size: 30rpx;
	}

	.my-weight .rate-and-bmi .card .top .sub-label {
		color: #a2a2a4;
		font-size: 20rpx;
	}

	.my-weight .rate-and-bmi .card .top .sub-label .value {
		color: #939495;
	}

	.my-weight .rate-and-bmi .card .bottom {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.my-weight .rate-and-bmi .card .bottom .left,
	.my-weight .rate-and-bmi .card .bottom .right {
		display: flex;
		flex-direction: column;
	}

	.my-weight .rate-and-bmi .card .bottom .left .value,
	.my-weight .rate-and-bmi .card .bottom .right .value {
		font-size: 30rpx;
		font-weight: 700;
	}

	.my-weight .rate-and-bmi .card .bottom .left .value .unit,
	.my-weight .rate-and-bmi .card .bottom .right .value .unit {
		font-size: 24rpx;
	}

	.my-weight .rate-and-bmi .card .bottom .left .label,
	.my-weight .rate-and-bmi .card .bottom .right .label {
		color: #a2a2a4;
		font-size: 28rpx;
	}

	.my-weight .rate-and-bmi .card .bottom .arrow {
		background-color: #ccc;
		height: 1rpx;
		position: relative;
		width: 50rpx;
	}

	.my-weight .rate-and-bmi .card .bottom .arrow::after {
		background-color: #ccc;
		content: "";
		display: block;
		height: 12rpx;
		position: absolute;
		right: 4rpx;
		top: -10rpx;
		transform: rotateZ(-45deg);
		width: 1rpx;
	}

	.weight-trend,
	.weight-trend .date-range {
		margin-bottom: 20rpx;
	}

	.weight-trend .date-range .uni-date {
		color: red;
	}

	.weight-trend .date-range .uni-date .uni-date-editor .uni-date-range {
		cursor: pointer;
	}

	.weight-trend .date-range .uni-date .uni-date-editor .uni-date__x-input {
		flex: none;
		width: 170rpx;
	}

	.leaderboard .my-ranking-info {
		background-color: #fef0ef;
		border-radius: 16rpx;
		color: #eb4442;
		display: flex;
		font-size: 32rpx;
		margin: 0 20rpx;
		padding: 20rpx 0;
	}

	.leaderboard .my-ranking-info .col1,
	.leaderboard .rank-body .col1,
	.leaderboard .rank-head .col1 {
		flex: 1;
		text-align: center;
	}

	.leaderboard .my-ranking-info .col4,
	.leaderboard .rank-body .col4,
	.leaderboard .rank-head .col4 {
		flex: 1.2;
		text-align: center;
	}

	.leaderboard .my-ranking-info .col3,
	.leaderboard .rank-body .col3,
	.leaderboard .rank-head .col3 {
		flex: 1;
		text-align: center;
	}

	.leaderboard .my-ranking-info .col2,
	.leaderboard .rank-body .col2,
	.leaderboard .rank-head .col2 {
		flex: 1.5;
		text-align: center;
	}

	.leaderboard .my-ranking-info .img,
	.leaderboard .rank-body .img,
	.leaderboard .rank-head .img {
		height: 60rpx;
		width: 60rpx;
	}

	.leaderboard .rank-body,
	.leaderboard .rank-head {
		align-items: center;
		display: flex;
		font-size: 28rpx;
		margin: 0 20rpx;
		padding: 20rpx 0;
	}

	.leaderboard .rank-head {
		color: #858585;
	}

	.leaderboard .no-rank-data {
		display: flex;
		justify-content: center;
		color: #858585;
	}
</style>